<template>
	<view class="warp">
		<view class="uni-margin-wrap">
			<view class="uni-item-view">
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list">
						<text class="text text1">投诉编号</text>
					</view>
					<view class="uni-item-view-item-list">
						<text class="text text2">{{ dateil.id }}</text>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list"><text class="text text1">投诉时间</text></view>
					<view class="uni-item-view-item-list">
						<text class="text text2">{{ dateil.addtime }}</text>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list"><text class="text text1">投诉类型</text></view>
					<view class="uni-item-view-item-list">
						<text class="text text2">{{ getTousuType(dateil.t_id) }}</text>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list"><text class="text text1">单号</text></view>
					<view class="uni-item-view-item-list">
						<text class="text text2">{{ dateil.order_num }}</text>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list"><text class="text text1">内容</text></view>
					<view class="uni-item-view-item-list">
						<text class="text text2">{{ dateil.content }}</text>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-item">
					<view class="uni-item-view-item-list"><text class="text text1">凭证图片</text></view>
					<view class="uni-item-view-item-list"><text class="text text2">查看</text></view>
				</view>

				<view class="uni-item-view-item1" v-for="(item,index) in dateil.huifu" :key="index">
					<view class="uni-item-view-item1-list">
						<text class="text text1">{{item.r_addtime}}</text>
					</view>
					<view class="uni-item-view-item1-list">
						<text class="text text2">{{item.r_content}}</text>
					</view>
				</view>
				 
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dateil: {},
			accident_id: ''
		};
	},
	onLoad(option) {
		this.accident_id = option.accident_id;
		this.getData();
	},
	methods: {
		getTousuType(e) {
			switch (e) {
				case 1: {
					return '运输时效';
					break;
				}
				case 2: {
					return '运输质量';
					break;
				}
				case 3: {
					return '服务态度';
					break;
				}
				case 4: {
					return '其他';
					break;
				}
				case 5: {
					return '运费纠纷';
					break;
				}
				default:
					return '';
					break;
			}
		},
		getData() {
			this.$refs.loadingCover.show();
			var data = { id: this.accident_id };
			this.http.sendRequest({
				api: this.api.mine.mineComplaintDetailApi,
				data: data,
				success: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					if (res.success == 'true' && res.data) {
						this.dateil = res.data;
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-item-view {
	width: 100%;
	margin-top: 16rpx;
	background-color: #fff;
	padding-top: 16rpx;
	padding-bottom: 16rpx;
	.uni-item-view-base {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 16rpx 24rpx 16rpx 24rpx;
	}

	.uni-item-view-item {
		padding-top: 0rpx;
		.uni-item-view-item-list {
			display: flex;
			align-items: center;

			.text {
				font-size: 28rpx;
			}
			.text1 {
				width: 140rpx;
				color: $uni-text-color-5;
			}
			.text2 {
				margin-left: 10rpx;
				color: $uni-text-color-grey;
			}
		}
	}
	.uni-item-view-item1 {
		padding-top: 0rpx;
		// display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		.uni-item-view-item1-list {
			width: 100%;
			display: flex;
			align-items: center;
			padding-left: 32rpx;
			padding-right: 32rpx;
			.text {
				font-size: 26rpx;
			}
			.text1 {
				margin-top: 16rpx;
				color: $uni-text-color-5;
			}
			.text2 {
				margin-top: 16rpx;
				
				color: $uni-text-color-grey;
			}
		}
	}
}
</style>
